{% extends 'usercenter-base.html' %}
{% load staticfiles %}
{% block custom_css %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{% static '' %}css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="{% static '' %}css/muke/course/common-less.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossorigin="anonymous"></script>
{% load filter %}
{% endblock %}
{% block custom_bread %}
     <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'users:info' %}">个人中心</a>></li>
                <li >话题讨论次数</li>
            </ul>
        </div>
    </section>
{% endblock %}


{% block rigt_form %}
      <div class="right">
            <div class="personal_des Releasecont">
                <div class="head">
                    <h1>话题讨论次数统计</h1>
                </div>
            </div>
            <div class="personal_des permessage">
                <div class="head">
                    <ul class="tab_header messagehead">
                      <li ><a href="{% url 'users:my_grade_classfication' %}">作业成绩区间统计</a></li>
                         <li><a href="{% url 'users:my_discuss_charts' %}">话题讨论次数统计</a></li>
                        <li ><a href="{% url 'users:my_score_list' %}">成绩列表</a></li>
                        <li class="active"><a href="#">话题人数</a></li>
                    </ul>
                </div>
                    <div class="companycenter">

                    <div class="messagelist">
                        {% for course in teach_course_list %}
                        <div class="messages" class="messages" style="border-bottom: 1px solid #edf1f2;">
                            <div class="fr">
                                <div class="top"><span>{{ course.name }}</span> <i style="font-size: 2px;color: #aaac9c">（发布时间：{{ course.add_time }}）</i>
                                    <button style="position: absolute;right: 5%" type="button"
                                            class="btn btn-outline-secondary btn-sm" data-toggle="modal"
                                            data-target="#exampleModal_{{ course.id }}">查看话题
                                    </button>



                                </div>
                                <p>
                                <span>
                                    <i class="aui-iconfont aui-icon-notice">&nbsp;&nbsp;话题数量：{{ course.coursediscuss_set.count }}</i>


                                </span>
                                </p>
                            </div>
                        </div>


                            <div class="modal fade" id="exampleModal_{{ course.id }}" tabindex="-1" aria-labelledby="exampleModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">{{ course.name }}</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    {%for item in  course.coursediscuss_set.all %}
                                    <a class="aui-iconfont aui-icon-notice" data-toggle="modal"
                                       data-target="#detailModal" href="/users/my_discuss_detail_list/?discuss_id={{ item.id }}"
                                       onclick="discussDetail({{ item.id }},'{{ item.title }}',1)">&nbsp;&nbsp;{{ item.title }}</a>
                                        <br>
                                    {% endfor %}
                                </div>
                                <div class="modal-footer">


                                </div>
                            </div>
                        </div>
                    </div>

                        {% endfor %}
                     <div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="my-title">第一个话题 讨论次数统计</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <table class="table" id="mytable">
                                        <thead>
                                        <tr>
                                            <th scope="col">ID</th>
                                            <th scope="col">用户名</th>
                                            <th scope="col">姓名</th>
                                            <th scope="col">讨论次数</th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                    <nav aria-label="Page navigation example">
                                        <ul class="pagination">
                                            <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                                            <li class="page-item active"><a class="page-link " href="#">1</a></li>
                                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                                            <li class="page-item">
                                                <a class="page-link" href="#" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                                <div class="modal-footer">

                                </div>
                            </div>
                        </div>
                    </div>
                    </div>


                </div>
                 <div class="pageturn pagerright">
              <ul class="pagelist">
             {% if teach_course_list.has_previous  %}
                 <li class="long"><a href="?page={{teach_course_list.previous_page_number}}">上一页</a></li>
            {%endif%}

                {% for i in   teach_course_list.paginator.page_range %}
                 {%if i == teach_course_list.number  %}
                     <li class="active"><a href="?page={{ i }}">{{i }}</a></li>
                    {% else %}
                      <li><a href="?page={{ i }}" class="page">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if teach_course_list.has_next  %}
                 <li class="long"><a href="?page={{teach_course_list.next_page_number}}">下一页</a></li>
            {%endif%}
            </ul>
            </div>
            </div>
        </div>
{% endblock %}
{% block custom_js %}
    <script type="text/javascript">
    function discusspage(id,page_num){
         document.getElementById("my-title").innerHTML = title;
        //jquery方式  get请求
        $.ajax({
            type:"GET",
            url:"/users/my_discuss_detail_list/?discuss_id="+id+"&page="+page_num,
            // data:"username=王方",

            async:true,
            cache:true,
            dataType:"text",
            success:function (backdata) {
                var  jsondata=JSON.parse(backdata)

                $("#mytable  tr:not(:first)").empty("")
                if(jsondata!=null){
                     for(value in jsondata.data){
                               $("#mytable").append("<tr><th scope='row'>"+jsondata.data[value].id+"</th> <td>"+jsondata.data[value].username+"</td> <td>"+jsondata.data[value].nickname+"</td> <td>"+jsondata.data[value].discusscount+"</td> </tr>")

                     }
                }

            $(".pagination").find("li").remove();//清除ul中的全部li，因为业务逻辑可能会重复
            if(jsondata.page_obj.has_pre){
                //有无上一页
                $(".pagination").append('<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>');
            }
            //中间页

               for(i=1 ; i<jsondata.page_obj.page_num+1;i++) {
               if(i==jsondata.page_obj.current_page){
                $(".pagination").append('<li class="page-item active"><a class="page-link" href="/users/my_discuss_detail_list/?discuss_id='+id+'&page='+i+'">'+i+'</a></li>');
                }else {
               $(".pagination").append('<li class="page-item "><a class="page-link" href="/users/my_discuss_detail_list/?discuss_id='+id+'&page='+i+'">'+i+'</a></li>');
               }
               }

            if(jsondata.page_obj.has_next){
                //有无下一页
                $(".pagination").append('<li class="page-item"><a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span></a></li>');

            }



            },
            error:function (msg) {
                alert("错误内容"+msg)
            }

   });
    }
function discussDetail(id,title,page){

        document.getElementById("my-title").innerHTML = title;
        //jquery方式  get请求
        $.ajax({
            type:"GET",
            url:"/users/my_discuss_detail_list/?discuss_id="+id+"&page="+page,
            // data:"username=王方",

            async:true,
            cache:true,
            dataType:"text",
            success:function (backdata) {
                var  jsondata=JSON.parse(backdata)

                $("#mytable  tr:not(:first)").empty("")
                if(jsondata!=null){
                     for(value in jsondata.data){
                               $("#mytable").append("<tr><th scope='row'>"+jsondata.data[value].id+"</th> <td>"+jsondata.data[value].username+"</td> <td>"+jsondata.data[value].nickname+"</td> <td>"+jsondata.data[value].discusscount+"</td> </tr>")

                     }
                }

            $(".pagination").find("li").remove();//清除ul中的全部li，因为业务逻辑可能会重复
            if(jsondata.page_obj.has_pre){
                //有无上一页
                $(".pagination").append(`<li class="page-item"><a class="page-link" href="#" aria-label="Previous" onclick="discussDetail(${id}, '${title}', ${jsondata.page_obj.pre_num})" ><span aria-hidden="true">&laquo;</span></a></li>`);
            }
            //中间页

               for(i=1 ; i<jsondata.page_obj.page_num+1;i++) {
                   //href="/users/my_discuss_detail_list/?discuss_id='+id+'&page='+i+'"
               if(i==jsondata.page_obj.current_page){
                   var dis_id=id
                 //  alert("讨论id："+dis_id+" 页码："+page+" 讨论标题："+title)
                {#$(".pagination").append('<li class="page-item active"><a class="page-link"  onclick="discussDetail(${id},${title},${i})">'+i+'</a></li>');#}
                   $(".pagination").append(`<li class="page-item active"><a class="page-link" onclick="discussDetail(${id}, '${title}', ${i})">${i}</a></li>`);
                }else {
                   $(".pagination").append(`<li class="page-item "><a class="page-link" onclick="discussDetail(${id}, '${title}', ${i})">${i}</a></li>`);
               {#$(".pagination").append('<li class="page-item "><a class="page-link"   onclick="discussDetail(${id},${title},${i})">'+i+'</a></li>');#}
               }
               }

            if(jsondata.page_obj.has_next){
                //有无下一页
                $(".pagination").append(`<li class="page-item"><a class="page-link" href="#" aria-label="Next" onclick="discussDetail(${id}, '${title}', ${jsondata.page_obj.next_num})"> <span aria-hidden="true">&raquo;</span></a></li>`);

            }



            },
            error:function (msg) {
                alert("错误内容"+msg)
            }
        });

}
    </script>

{% endblock %}




